Ext.ns('App.View');

App.View.CounterListEdit = Ext.extend(Ext.Panel, {

	// privat
	initComponent: function() {

		var config = {
			layout: 'fit',		
			dockedItems: [{
	            dock   : 'top',
	            xtype  : 'toolbar',
	            ui     : 'light',
		        title  : 'Counter <i>(Edit entrys)</i>',
	            items  : [{
			    	text    : 'Add',
		            handler : this.onTapButtonAction
			    },{
			    	xtype   : 'spacer'
                },{
			    	text    : 'Cancel',
		            handler : this.onTapButtonAction
                },{
			    	text    : 'Done',
			    	ui      : 'action',
		            handler : this.onTapButtonAction
			    }]
	        }],
			items: [{
				id   : 'viewCounterListEdit',
				xtype: 'list',
				store: 'counterStore',
				itemTpl: new Ext.XTemplate(
					'<tpl for="."><div class="counterListObj">',
	    				'<div class="counterGfx" style="background-image:url({counterGfx});" alt="{id}"></div>',
		    			'<div class="counterName">{counterName}</div>',
		    			'<div class="counterDuration">{[this.secondsToTime(values)]}</div>',
	    				'<div class="clearBoth"></div>',
		    		'</div></tpl>',
		    		{
					    secondsToTime: function(data) {
							var secs    = parseInt(data.counterDuration, 10);						
						    var hours   = Math.floor(secs / (60 * 60));
						    var minutes = Math.floor(secs % (60 * 60) / 60);
						    var seconds = Math.ceil(secs % (60 * 60) % 60);
						    var timeObj = {
						    	"hours"   : hours   < 10 ? "0" + hours   : hours,
						    	"minutes" : minutes < 10 ? "0" + minutes : minutes,
						    	"seconds" : seconds < 10 ? "0" + seconds : seconds
						    };
						    var timeVar = timeObj.hours+":"+timeObj.minutes+":"+timeObj.seconds;
						    return timeVar;
						},
			    		compiled: true,
					}
				),
			    grouped     : true,
			    indexBar    : false,
	    		listeners   : {
	    			scope   : this,
	    			itemTap : this.onTapListAction		   				
	    		}
			}]
		};
		
		Ext.apply(this, config);
		App.View.CounterListEdit.superclass.initComponent.call(this);
		
	},
	
	onTapListAction: function(component, index, item, eventObject){
		var dataset = component.store.getAt(index).data;
		this.CounterEditInstance = new App.View.CounterEdit(dataset);
		this.CounterEditInstance.setCentered(true);
	    this.CounterEditInstance.show();
	},
	
	onTapButtonAction: function(button, event) {
		switch (button.text) {
			case 'Add':
				this.CounterAddInstance = new App.View.CounterAdd();
		        this.CounterAddInstance.showBy(button);
				break;
			case 'Cancel':
				App.fireEvent('setView', 'CounterList', 'fade', '');
				break;
			case 'Done':
				App.fireEvent('setView', 'CounterList', 'fade', '');
				break;
		}
	}
	
});

Ext.reg('App.View.CounterListEdit', App.View.CounterListEdit);
